<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
<link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
<script type="text/javascript" src="../res/layui/layui.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<style type="text/css">
	.layui-input{
		width: 300px;
	}
</style>
</head>
<body>

	<div class="site-nav-bg">
		<div class="site-nav w1200">
			<p class="sn-back-home">
				<i class="layui-icon layui-icon-home"></i> <a href="#">首页</a>
			</p>
			<div class="sn-quick-menu">
				<div class="login">
					<a href="login.html">登录</a>
				</div>
				<div class="sp-cart">
					<a href="shopcart.html">购物车</a><span>2</span>
				</div>
			</div>
		</div>
	</div>



	<div class="header">
		<div class="headerLayout w1200">
			<div class="headerCon">
				<h1 class="mallLogo">
					<a href="#" title="母婴商城"> <img src="../res/static/img/logo.png">
					</a>
				</h1>
				<div class="mallSearch">
					<form action="" class="layui-form" novalidate lay-filter="user">
						<input type="text" name="pname" required lay-verify="required"
							autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
						<button class="layui-btn" lay-submit lay-filter="formDemo">
							<i class="layui-icon layui-icon-search"></i>
						</button>
						<input type="hidden" name="" value="">
					</form>
				</div>
			</div>
		</div>
	</div>


	<div class="content content-nav-base shopcart-content">
		<div class="main-nav">
			<div class="inner-cont0">
				<div class="inner-cont1 w1200">
					<div class="inner-cont2">
						<a href="commodity.html" class="active">所有商品</a> <a
							href="buytoday.html">今日团购</a> <a href="information.html">母婴资讯</a>
						<a href="about.html">关于我们</a>
					</div>
				</div>
			</div>
		</div>

		<table id="demo" lay-filter="test"></table>
		

 
		<script>
		layui.use(['table','jquery','form'], function(){
		  var table = layui.table;
		  var $ = layui.jquery;
		  var form = layui.form;
		  
		  form.on('submit(formDemo)', function(data){
			  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
			  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			  
			  //重载表格
			  table.reload('demo',{where:data.field})
			  
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		  
		  
		  //第一个实例
		  table.render({
		    elem: '#demo'
		    ,height: 312
		    ,url: '../../orders/findOrdersByUId.do?uid=1' //数据接口
		    ,page: true //开启分页
		    ,cols: [[ //表头
		      {field: 'oid', title: '订单号'}
		      ,{field: '', title: '状态',width:160,templet:function(d){
		    	  //console.log(d.orderState)
		    	  if(d.orderState=="已发货"){//如果状态是已发货，显示确认收货按钮
		    		  return d.orderState+' <button type="button" class="layui-btn layui-btn-xs">确认收货</button>';
		    	  }else{
		    		  return d.orderState;
		    	  }
		      }}
		      ,{field: '', title: '商品图片',templet:function(d){
		    	  return '<img onclick="toDetails('+d.pid+')" src="/file/'+d.url+'"/>';
		      }} 
		      ,{field: 'pname', title: '商品名称'}
		      ,{field: 'payDate', title: '下单时间'}
		      ,{field: 'nickname', title: '下单人'} 
		      ,{field: 'address', title: '收货地址'}
		      ,{field: 'name', title: '收货人'}
		      ,{field: 'phone', title: '手机号'} 
		      ,{field: 'unitPrice', title: '单价'} 
		      ,{field: 'num', title: '购买数量'}
		      ,{field: 'xiaoji', title: '金额'} 
		      ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}
		    ]],done : function(res, curr, count) {
		        //merge(res);
		    }
		  });
		  
		//工具条事件
		  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		    var data = obj.data; //获得当前行数据
		    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
		   
		    if(layEvent === 'default'){ //设为默认收货地址
		      //do somehing
		      $.post(
		    		"../users/setDefaultAddress.do"	,
		    		{
		    			addressId:data.id//地址id
		    			,id:1//登录用户id，这里模拟1，后面要从sessionStorage里获取登录用户的id
		    		},function(res){
		    			layer.msg("已设为默认收货地址");
		    			//刷新页面
		    			location.reload();
		    		}
		      );
		      
		    } else if(layEvent === 'del'){ //删除
		      layer.confirm('真的删除行么', function(index){
		        
		        //向服务端发送删除指令
		        $.post(
		        	"../../address/del.do?id="+data.id,
		        	function(res){
		        		if(res>0){
		        			obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					        layer.close(index);
		        		}else{
		        			layer.msg("默认收货地址不能删除")
		        		}
		        		
		        	}
		        );
		      });
		    } else if(layEvent === 'edit'){ //编辑
		      //do something
		      
		      //同步更新缓存对应的值
		      obj.update({
		        username: '123'
		        ,title: 'xxx'
		      });
		    } else if(layEvent === 'LAYTABLE_TIPS'){
		      layer.alert('Hi，头部工具栏扩展的右侧图标。');
		    }
		  });
		  
		});
		
		
		function toDetails(id){
			//console.log(id)
			location.href="details.html?id="+id;
		}
		
		function merge(res) {
			
			layui.use('jquery',function(){
				var $ = layui.jquery;
            
	        var data = res.data;
	        var mergeIndex = 0;//定位需要添加合并属性的行数
	        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
	        var columsName = ['id','name'];//需要合并的列名称
	        var columsIndex = [0,1];//需要合并的列索引值
	    
	        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
	            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
	                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
	                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
	                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
	                    
	                    if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
	                        mark += 1;
	                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
	                            $(this).attr("rowspan", mark);
	                        });
	                        tdCurArr.each(function () {//当前行隐藏
	                            $(this).css("display", "none");
	                        });
	                    }else {
	                        mergeIndex = i;
	                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
	                    }
	                }
	            mergeIndex = 0;
	            mark = 1;
	        }
			})
	    }
		</script>
		
		<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="default">默认</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	</div>


</body>
</html>